// 百科页右侧的病害列表，带分页
<template>
  <div class="box">
    <div
      class="right-li"
      v-for="(plant, index) in records"
      :key="index"
      @click="xiangxi(plant.chineseName)"
    >
      <img class="li-img" :src="plant.img1" />
      <p class="li-text">{{ plant.chineseName }}</p>
    </div>
    <div class="right-footer">
      <!--            完整的分页-->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[8, 12, 16]"
        :current-page="current"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { plants } from "@/api/index";
export default {
  data() {
    return {
      records: [],
      total: 160,
      size: 16,
      current: 1,
      pages: 10,
    };
  },
  mounted() {
    //第一次加载时（右侧菜单栏点击或详细页返回）时，保留之前的页数和页面条数
    if (this.$route.query.current) {//避免直接通过顶部菜单栏打开百科页面而加载右侧病害列表
      this.current = parseInt(this.$route.query.current);
      this.size = parseInt(this.$route.query.size);
    }

    this.init();
  },
  computed: {
    //要么通过左侧菜单栏点击，妖媚在详情页返回，才有这个值this.$route.query.plant
    //直接通过顶部菜单栏打开百科页面而加载右侧病害列表是不会有这个值,则是undefined
    plant() {
      //  计算属性，获取植物名称
      return this.$route.query.plant;
    },
  },
  watch: {
    plant(newData, oldData) {
      console.log("oldData==" + oldData);
      console.log("newData==" + newData);
      this.init(); //   需要调用的方法
    },
  },
  methods: {
    async init() {
      let data = {};
      //如果不为空，根据植物名称查找该植物的所有病害
      console.log(this.plant);
      console.log(typeof(this.plant));
      if (this.plant != null || this.plant != undefined) {
        await plants(this.plant, this.current, this.size).then((res) => {
          data = JSON.parse(JSON.stringify(res.data)).data;
        });
      } else {
        //当第一次打开页面时为空，默认以"番茄"来搜索，
        await plants("番茄", this.current, this.size).then((res) => {
          data = JSON.parse(JSON.stringify(res.data)).data;
        });
      }
      //   console.log("data===" + JSON.stringify(data));
      this.records = data.records;
      this.total = data.total;
      this.size = data.size;
      this.current = data.current;
      this.pages = data.pages;
    },
    //每页条数，回调函数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.init();
    },
    //当前页数，回调函数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val;
      this.init();
    },
    xiangxi(name) {
      //页面跳转，并携带参数，病害名称，用于搜索病害详情
      this.$router.push({
        path: "/xiangxi",
        query: {
          context: name, //病害名称
          current: this.current, //病害名称
          size: this.size, //病害名称
        },
      });
    },
  },
};
</script>
<style scoped>
.box {
  width: 760px;
  height: 880px;
  background-color: rgb(255, 255, 255);
}
.right-li {
  width: 180px;
  height: 190px;
  background-color: rgb(255, 255, 255);
  display: inline-block;
  margin: 5px;
  /* top:3px */
  position: relative;
}
.li-img {
  width: 180px;
  height: 160px;
  /* background-color: rgb(5, 0, 9); */
  position: absolute;
}
.li-text {
  position: absolute;
  bottom: 6px;
  margin-left: 10px;
  margin-bottom: 1px;
  font-size: 17px;
  color: rgb(1, 19, 10);

  /* margin: auto; */
}
.right-footer {
  width: 560px;
  height: 50px;
  /* background-color: blue; */
  position: absolute;
  bottom: 5px;
  left: 130px;
}
</style>
